<!-- 月票凭证配置 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      @handleChange="handleSearchChange"
      :isNeedTree="true"
      :isCheckbox="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>

    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MONTH:TICKET:CERTIFI_RULE:SAVE')"
              @click.prevent="addCertifiRule('certifi_rule_modal')"
            >新增</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MONTH:TICKET:CERTIFI_RULE_AGREEMENT:SAVE')"
              @click.prevent="showAgreementEditModal('certifi_rule_agreementContent_modal')"
            >协议管理</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column
                  v-if="item.checked"
                  :key="index"
                  :label="item.text"
                  :min-width="item.minWidth"
                  :width="item.width"
                  :prop="item.prop"
                  :sortable="item.sortable"
                ></el-table-column>
              </template>
            </el-table-column>

            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span
                  v-else-if="'createTime' == props.prop"
                >{{ scope.row.createTime |mileSecondToDate }}</span>
                <span
                  v-else-if="'updateTime' == props.prop"
                >{{ scope.row.updateTime |mileSecondToDate }}</span>
                <span v-else-if="'certifiSampleUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['certifiSampleUrl'])"
                  >
                    <img
                      class
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.certifiSampleUrl"
                    />
                  </a>
                </span>
                <span v-else-if="'outCertifiSampleUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['outCertifiSampleUrl'])"
                  >
                    <img
                      class
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.outCertifiSampleUrl"
                    />
                  </a>
                </span>
                <span v-else-if="'monthTickets' == props.prop">
                  <a
                    class="imgLink"
                    @click="editCertifiRule('certifi_rule_modal', scope.row,false)"
                  >点击查看</a>
                </span>
                <span v-else-if="'agreementContent' == props.prop">
                  <a
                    class="imgLink"
                    @click="showAgreementContentModal('certifi_rule_agreementContent_modal', scope.row)"
                  >点击查看</a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column
                  v-if="item.checked"
                  :key="index"
                  :label="item.text"
                  :min-width="item.minWidth"
                  :width="item.width"
                  :prop="item.prop"
                  :sortable="item.sortable"
                ></el-table-column>
              </template>
            </el-table-column>

            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span
                  v-else-if="'createTime' == props.prop"
                >{{ scope.row.createTime |mileSecondToDate }}</span>
                <span
                  v-else-if="'updateTime' == props.prop"
                >{{ scope.row.updateTime |mileSecondToDate }}</span>
                <span v-else-if="'certifiSampleUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['certifiSampleUrl'])"
                  >
                    <img
                      class
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.certifiSampleUrl"
                    />
                  </a>
                </span>
                <span v-else-if="'outCertifiSampleUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['outCertifiSampleUrl'])"
                  >
                    <img
                      class
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.outCertifiSampleUrl"
                    />
                  </a>
                </span>
                <span v-else-if="'monthTickets' == props.prop">
                  <a
                    class="imgLink"
                    @click="editCertifiRule('certifi_rule_modal', scope.row,false)"
                  >点击查看</a>
                </span>
                <span v-else-if="'agreementContent' == props.prop">
                  <a
                    class="imgLink"
                    @click="showAgreementContentModal('certifi_rule_agreementContent_modal', scope.row)"
                  >点击查看</a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="130"
              class="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  title="修改"
                  size="small"
                  type="primary"
                  icon="icon-edit"
                  class="ake-icon-font"
                  v-if="isPermmited('MONTH:TICKET:CERTIFI_RULE:SAVE')"
                  @click="editCertifiRule('certifi_rule_modal',scope.row,true)"
                  plain
                ></el-button>
                <el-button
                  title="删除"
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  v-if="isPermmited('MONTH:TICKET:CERTIFI_RULE:DEL')"
                  @click="delCertifiRule(scope.row)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <!-- 新增or编辑modal -->
    <basic-modal
      ref="certifi_rule_modal"
      width="640"
      customeClass="certifi_rule_modal"
      static="true"
    >
      <h3 slot="title">{{certifi_rule_modal_title}}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="certifi_rule_modal_form"
          class="certifi_rule_modal_form"
          :model="certifiRuleModel"
          :rules="certifiRuleRules"
          label-position="left"
          label-width="80px"
          style="padding:0px 30px;"
        >
          <el-form-item label="凭证名称" prop="certifiName">
            <el-input placeholder="请输入凭证名称" v-model="certifiRuleModel.certifiName"></el-input>
          </el-form-item>
          <el-form-item label="凭证状态" prop="certifiStatus">
            <template>
              <el-radio class="radio" v-model="certifiRuleModel.certifiStatus" :label="1">开启</el-radio>
              <el-radio class="radio" v-model="certifiRuleModel.certifiStatus" :label="0">关闭</el-radio>
            </template>
          </el-form-item>
          <el-form-item
            label="适用月票"
            prop="monthTicketNames"
            style="margin-bottom:30px;"
            class="row-item"
          >
            <el-input placeholder="无" v-model="certifiRuleModel.monthTicketNames" :readonly="true"></el-input>
            <el-button
              size="small"
              type="primary"
              v-if="certifiRuleEdit"
              @click="openSelectMonthTicketModal('selectMonthTicketModal')"
              class="select-park-btn ake_btn_text"
            >选择</el-button>
          </el-form-item>
          <el-form-item label="停车场协议" prop="parkId" class="row-item">
            <el-select
              v-model="certifiRuleModel.parkId"
              placeholder="请选择停车场"
              popper-class="select-search-filter"
              @change="selectParkSure"
              no-data-text="无数据，请先创建协议"
            >
              <el-option
                v-for="pitem in parkingLotList"
                :key="pitem.value"
                :label="pitem.name"
                :value="pitem.value"
              >
                <el-tooltip placement="bottom-start" style="float:left;">
                  <div slot="content">
                    <span>{{ pitem.title }}</span>
                  </div>
                  <span class="grayTip">{{ pitem.topArea }}</span>
                </el-tooltip>
                <p style="float:left;">{{ pitem.name }}</p>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="certifiSampleUrl" label="凭证样例" class="row-item">
            <input
              type="file"
              class="file-input"
              v-if="certifiRuleEdit"
              id="certifiSampleUrl"
              name="certifiSampleUrl"
            />
            <img
              v-if="certifiRuleModel.certifiSampleUrl"
              :src="certifiRuleModel.certifiSampleUrl"
              class="inCertifiSample-pic"
              alt
            />
          </el-form-item>
          <el-form-item label="凭证说明" prop="certifiDesc">
            <el-input type="textarea" placeholder="请输入凭证说明" v-model="certifiRuleModel.certifiDesc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          v-if="certifiRuleEdit"
          @click.stop="submitForm('certifi_rule_modal_form','certifi_rule_modal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('certifi_rule_modal')">取消</button>
      </div>
    </basic-modal>

    <!-- 新增or编辑modal -->
    <basic-modal
      ref="certifi_rule_modal"
      width="640"
      customeClass="certifi_rule_modal"
      static="true"
    >
      <h3 slot="title">{{certifi_rule_modal_title}}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="certifi_rule_modal_form"
          class="certifi_rule_modal_form"
          :model="certifiRuleModel"
          :rules="certifiRuleRules"
          label-position="left"
          label-width="80px"
          style="padding:0px 30px;"
        >
          <el-form-item label="凭证名称" prop="certifiName">
            <el-input placeholder="请输入凭证名称" v-model="certifiRuleModel.certifiName"></el-input>
          </el-form-item>
          <el-form-item label="凭证状态" prop="certifiStatus">
            <template>
              <el-radio class="radio" v-model="certifiRuleModel.certifiStatus" :label="1">开启</el-radio>
              <el-radio class="radio" v-model="certifiRuleModel.certifiStatus" :label="0">关闭</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="适用月票" prop="monthTicketNames">
            <div class="el-form--inline">
              <template v-if="selectedMonthTicket.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li
                        v-for="item in selectedMonthTicket"
                        style="margin-bottom: 4px; font-size: 12px;"
                      >{{ item }}</li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{selectedMonthTicketStr}}</div>
                </el-tooltip>
              </template>

              <div v-if="!selectedMonthTicket.length" class="selected-parkingLot grayTip">未选任何适用月票</div>

              <el-button
                size="small"
                type="primary"
                v-if="certifiRuleEdit"
                @click="openSelectMonthTicketModal('selectMonthTicketModal')"
                class="select-park-btn ake_btn_text"
              >选择</el-button>
            </div>
          </el-form-item>
          <el-form-item label="停车场协议" prop="parkId" class="row-item">
            <el-select
              v-model="certifiRuleModel.parkId"
              placeholder="请选择协议"
              popper-class="select-search-filter"
              @change="selectParkSure"
              no-data-text="无数据，请先创建协议"
            >
              <el-option
                v-for="item in parkingLotList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
                <el-tooltip placement="bottom-start" style="float:left;">
                  <div slot="content">
                    <p>{{item.title}}</p>
                  </div>
                  <span class="grayTip">{{item.topArea}}</span>
                </el-tooltip>
                <p style="float:left;">{{ item.name }}</p>
              </el-option>
            </el-select>
            <el-button
              type="primary"
              class="ake_btn ake_btn_text"
              @click="showAgreementEditModal('certifi_rule_agreementContent_modal')"
            >去创建</el-button>
          </el-form-item>
          <el-form-item prop="certifiSampleUrl" label="凭证样例" class="row-item">
            <div
              class="grayChunk"
              v-if="certifi_rule_modal_title=='新增'"
            >{{certifiRuleModel.certifiSampleName || '未选任何文件'}}</div>
            <div v-if="certifi_rule_modal_title=='修改' && certifiRuleModel.certifiSampleUrl">
              <img :src="certifiRuleModel.certifiSampleUrl" class="inCertifiSample-pic" alt />
            </div>
            <a href="javascript:;" class="a-upload ake_btn ake_btn_text el-button--primary">
              <input
                type="file"
                title
                v-if="certifiRuleEdit"
                id="certifiSampleUrl"
                name="certifiSampleUrl"
              />选择文件
            </a>
          </el-form-item>
          <el-form-item label="凭证说明" prop="certifiDesc">
            <el-input type="textarea" placeholder="请输入凭证说明" v-model="certifiRuleModel.certifiDesc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          v-if="certifiRuleEdit"
          @click.stop="submitForm('certifi_rule_modal_form','certifi_rule_modal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('certifi_rule_modal')">取消</button>
      </div>
    </basic-modal>

    <!-- 协议内容modal -->
    <basic-modal
      ref="certifi_rule_agreementContent_modal"
      width="550"
      customeClass="certifi_rule_agreementContent_modal"
      static="true"
    >
      <h3 slot="title">协议管理</h3>
      <div class="modal-body" slot="modal-body" style="padding:20px">
        <el-form
          ref="certifi_rule_agreement_form"
          :model="agreenment"
          :rules="certifiRuleRules"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="停车场" prop="parkId" v-if="agreementEdit">
            <el-select
              v-model="agreenment.parkId"
              no-data-text="无匹配的搜索结果"
              filterable
              placeholder="请选择/搜索车场协议"
              @change="changeParkSelect"
              popper-class="select-search-filter"
            >
              <el-option
                v-for="item in list"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              >
                <el-tooltip placement="bottom-start" style="float:left;" v-if="item.topArea">
                  <div slot="content">
                    <span>{{ item.area }}</span>
                  </div>
                  <span class="grayTip">{{ item.topArea }}</span>
                </el-tooltip>
                <span v-else class="grayTip" style="float:left;">{{ item.topArea }}</span>
                <p style="float:left;">{{ item.label }}</p>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停车场" v-if="!agreementEdit">{{agreenment.parkName}}</el-form-item>
          <el-form-item label="协议名称" prop="title" v-if="agreementEdit">
            <el-input v-model="agreenment.title"></el-input>
          </el-form-item>
          <el-form-item label="协议名称" v-if="!agreementEdit">{{agreenment.title}}</el-form-item>
          <el-form-item label="协议内容" prop="content" v-if="agreementEdit">
            <el-input type="textarea" :rows="16" v-model="agreenment.content"></el-input>
          </el-form-item>
          <el-form-item label="协议内容" v-if="!agreementEdit">{{agreenment.content}}</el-form-item>
        </el-form>
      </div>
      <div
        class="modal-footer"
        slot="modal-footer"
        v-if="agreementEdit && isPermmited('MONTH:TICKET:CERTIFI_RULE_AGREEMENT:SAVE')"
      >
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="saveAgreement('certifi_rule_agreementContent_modal','certifi_rule_agreement_form')"
        >保存</button>
      </div>
      <div slot="modal-footer" v-else></div>
    </basic-modal>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!--选择月票-->
    <basic-modal
      ref="selectMonthTicketModal"
      width="420"
      customeClass="select-park-modal"
      static="true"
    >
      <h3 slot="title">选择月票</h3>
      <div class="modal-body select-month-ticket" slot="modal-body" style="padding: 20px 50px;">
        <div class="search-box">
          <el-input
            placeholder="请输入月票名称/停车场名称"
            v-model.trim="keyWord"
            @change="searchMonthTicketKeyWord"
          ></el-input>
          <el-button
            type="primary"
            class="ake_btn ake_btn_text"
            @click.prevent="searchMonthTicketKeyWord()"
          >搜 索</el-button>
        </div>
        <div class="common-tree modal-tree-box">
          <el-checkbox-group v-model="monthTicketConfigIdArr" class="month-ticket-list">
            <div v-for="item in monthTicketList" v-if="!item.isHidden">
              <el-checkbox :label="item.configId" :key="item.configId">{{item.name}}</el-checkbox>
              <el-tooltip effect="dark" placement="top-start">
                <div slot="content">
                  <p v-for="pItem in item.parkNameList">{{pItem}}</p>
                </div>
                <span>{{item.parkNameStr}}</span>
              </el-tooltip>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectMonthTicketSure()"
        >确认</button>
        <button
          class="ake_btn ake_btn_text modal-close"
          @click="closed('selectMonthTicketModal')"
        >取消</button>
      </div>
    </basic-modal>

    <!-- 查看适用月票 -->
    <el-dialog
      :title="certifi_rule_modal_title"
      :visible.sync="isShowMonthTicketVisiable"
      width="540px"
      class="zb-dialog"
    >
      <div class="dialog-content checkMonthTicket">
        <table>
          <tr>
            <td>凭证名称</td>
            <td>{{certifiRuleModel.certifiName}}</td>
          </tr>
          <tr>
            <td>凭证状态</td>
            <td>{{certifiRuleModel.certifiStatusStr}}</td>
          </tr>
          <tr>
            <td>适用月票</td>
            <td>{{selectedMonthTicketStr}}</td>
          </tr>
          <tr>
            <td>停车场协议</td>
            <td>{{certifiRuleModel.parkName}}</td>
          </tr>
          <tr>
            <td>凭证样例</td>
            <td>
              <img :src="certifiRuleModel.certifiSampleUrl" alt="暂无图片" width="84px" />
            </td>
          </tr>
          <tr>
            <td>凭证说明</td>
            <td>{{certifiRuleModel.certifiDesc}}</td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import certifi_rule from "./js/certifi_rule.js";

export default {
  name: "monthTicketCertifiRule",
  mixins: [common, stardardList, invokeModal, certifi_rule, images],
  components: {
    BigPicModal
  },
  data() {
    var today = [
      new Date(
        moment()
          .add(-7, "days")
          .format("YYYY-MM-DD 00:00:00")
      ),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];
    return {
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: true,
          type: "text",
          name: "query_certifiName",
          propName: "query_certifiName",
          text: "凭证名称",
          value: ""
        },
        {
          index: 1,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "createTimeFromTo",
          propName: "createTimeFrom,createTimeTo",
          text: "创建时间",
          value: today,
          style: {
            width: "360px"
          }
        },
        {
          index: 2,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "updateTimeFromTo",
          propName: "updateTimeFrom,updateTimeTo",
          text: "最近修改时间",
          value: "",
          style: {
            width: "360px"
          }
        }
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "certifiName",
          text: "凭证名称",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "monthTickets",
          text: "适用月票"
        },
        // {
        //   index: 3,
        //   isShow: false,
        //   prop: "certifiTypeStr",
        //   text: "凭证种类",
        //   initHidden: true
        // },
        {
          index: 3,
          isShow: false,
          prop: "certifiStatusStr",
          text: "凭证状态",
          minWidth: 50
        },
        {
          index: 4,
          isShow: false,
          prop: "certifiSampleUrl",
          text: "凭证样例",
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "certifiDesc",
          text: "凭证说明",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 6,
          isShow: false,
          prop: "agreementTitle",
          text: "协议名称",
          initHidden: true
        },
        {
          index: 7,
          isShow: false,
          prop: "agreementContent",
          text: "协议内容",
          minWidth: 80
        },
        {
          index: 8,
          isShow: false,
          prop: "createBy",
          text: "创建人",
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 80,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "updateBy",
          text: "最近修改人",
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: "updateTime",
          text: "最近修改时间",
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style>
.select-month-ticket > .modal-tree-box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.select-month-ticket > .modal-tree-box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #d4d4d4;
}
</style>

<style lang="less" scoped>
.a-upload {
  position: relative;
  margin-left: 10px;

  > input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    height: 32px;
    width: 82px;
  }
}

.checkMonthTicket {
  width: 400px;
  margin: auto;

  > table {
    width: 100%;

    > tr {
      > td {
        &:first-child {
          width: 85px;
        }
      }
    }
  }
}

.el-form--inline {
  display: flex;
}

.selectParkingLotTree {
  > li {
    > ul {
      padding-left: 15px;
    }
  }
}

.selected-parkingLot {
  flex: 1;
  background: #f4f4f4;
  border-radius: 4px;
  padding: 0px 10px;
  display: inline-block;
  font-size: 14x;
  cursor: pointer;
  height: 32px;
  margin-right: 10px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;

  &.grayTip {
    color: #999999;
    padding-left: 10px;
  }
}
</style>

<style lang="less">
.certifi_rule_modal_form {
  > .el-form-item {
    &.row-item {
      .grayChunk {
        flex: 1;
        background: #f4f4f4;
        border-radius: 4px;
        padding-left: 10px;
        color: #999999;
      }

      > .el-form-item__content {
        display: flex;
        align-items: center;

        > .el-input {
          flex: 1;
        }

        > .el-button {
          margin-left: 10px;
        }

        img {
          height: 32px;
        }
      }
    }
  }
}

.select-month-ticket {
  .search-box {
    display: flex;

    > button {
      margin-left: 15px;
    }
  }

  .modal-tree-box {
    margin-top: 15px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    height: 310px;
    overflow-y: auto;
    padding: 5px 12px;

    .month-ticket-list {
      &.el-checkbox-group {
        font-size: 12px;
      }

      > div {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        margin-bottom: 5px;

        > span {
          background: #f4f4f4;
          border-radius: 2px;
          width: 86px;
          height: fit-content;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #888888;
          padding-left: 5px;
        }
      }
    }
  }
}
</style>
